<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back();"></div>
      <div class="search-input">
      	<input type="text" placeholder="搜小说" @keyup.13='searchVal()' v-model="val">
      </div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>


    <div class="search-recommend">
    	<h3>热门搜索</h3>
    	<div class="list cf">
    		<router-link :to="{path:'/bookdetails/'+item.id}" v-for="item in list">{{item.title}}</router-link>
    	</div>
    </div>

  </div>
</template>
<script>

    export default {
    	name: 'search',
    	components: {

	    },
    	data () {
      		return {
      			list:[],
      			val:''
	      	}
	    },
	    created(){
	        this.$axios.post(
                this.$store.state.url+"hot_reach?device_sn="+this.$store.state.device,
                {device_sn:this.$store.state.device}).then(res=>{
                  console.log(res.data);
                  this.list = res.data.list;
            });
	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
	        searchVal(){
	        	if(this.val == ''){
	        		alert("请输入你搜索的内容");
	        		return false;
	        	}
	        	this.$store.commit('setSearchVal',this.val);
	            this.$router.push({ path: '/searchbook'})
	        }
	    }
  	}
</script>
<style lang="scss" scoped>
	.search-recommend{
		margin-top:50px;
		padding:0 30px;
		h3{
			font-size:36px;
			color:#222;
			margin-bottom:40px;
			font-weight: normal;
		}
		a{
			font-size:32px;
			color:#808080;
			line-height:50px;
			border-radius:50px;
			margin-right:50px;
			border:2px solid #cccccc;
			margin-bottom:50px;
			float:left;
			padding:0 30px;
			position: relative;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
	}
</style>
